<template>
  <div class="main_box">
    <el-row class="header-row">
      <el-col>
        <div class="search_wrap">
          <el-form :inline="true" :model="filters" class="demo-form-inline" ref="searchForm">
            <el-form-item prop="equipName">
              <el-input v-model="filters.equipName" clearable placeholder="呼叫器名称"></el-input>
            </el-form-item>
            <el-form-item prop="mergeValue">
              <el-input style="width:240px" v-model="filters.mergeValue" clearable placeholder="呼叫器编号/MAC/设备电话号"></el-input>
            </el-form-item>
            <el-form-item prop="beeperType">
              <el-select v-model="filters.beeperType" clearable filterable placeholder="呼叫器类型">
                <el-option v-for="item in beeperTypeList" :key="item.id" :value="item.id"
                           :label="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="beeperVersion">
              <el-select v-model="filters.beeperVersion" clearable filterable placeholder="呼叫器版本">
                <el-option v-for="item in beeperVersionList" :key="item.id" :value="item.id"
                           :label="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="equipState">
              <el-select v-model="filters.equipState" clearable filterable placeholder="呼叫器状态">
                <el-option value="0" label="未开通"></el-option>
                <el-option value="1" label="未激活"></el-option>
                <el-option value="2" label="在线"></el-option>
                <el-option value="3" label="离线"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="classifyId">
              <el-select v-model="filters.classifyId" clearable filterable placeholder="呼叫器分类">
                <el-option v-for="item in beeperClassifyList" :key="item.id" :value="item.id"
                           :label="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="linkName">
              <el-input v-model="filters.linkName" clearable placeholder="联系人"></el-input>
            </el-form-item>
            <el-form-item prop="phone">
              <el-input v-model="filters.phone" clearable placeholder="联系电话"></el-input>
            </el-form-item>
            <el-form-item prop="address">
              <el-input v-model="filters.address" clearable placeholder="详细地址"></el-input>
            </el-form-item>
            <el-form-item prop="villageId">
              <el-select v-model="filters.villageId" @change="getResidentAddressList" placeholder="请选择小区" clearable
                         filterable>
                <el-option v-for="item in villageList" :value="item.id" :label="item.name" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="residentAddress">
              <el-cascader @change="" v-model="filters.residentAddress"
                           :props="{ value: 'id', label: 'name', checkStrictly: true }" :options="residentAddressList"
                           clearable filterable placeholder="栋/单元/层/门牌号"></el-cascader>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-search" type="primary" @click="onSearch">查询</el-button>
              <el-button icon="el-icon-refresh-left" @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col>
        <div class="opration_wrap">
          <div style="width: 6%; text-align: right">
            <el-tooltip content="刷新" placement="top">
              <el-button circle icon="el-icon-refresh-right" @click="reload" size="mini"></el-button>
            </el-tooltip>
          </div>
          <div class="operationButton">
            <div>
              <el-button type="primary" plain icon="fa fa-plus" v-has="permissionAdd" @click="handleClickAdd()"
                         size="mini"> 新增
              </el-button>
              <el-button type="primary" icon="fa fa-plus" v-has="permissionAdd" @click="handleClickBatchAdd()"
                         size="mini"> 批量新增
              </el-button>
              <el-button type="danger" plain icon="el-icon-edit" v-has="permissionBatchModify"
                         @click="handleClickBatchModify()" size="mini"> 批量修改
              </el-button>
              <el-button type="danger" icon="el-icon-delete" v-has="permissionForceDelete"
                         @click="handleClickBatchReOrDelete(-1)" size="mini"> 批量删除
              </el-button>
              <el-button v-has="permissionSetMainUser" icon="el-icon-user" @click="handleSetMUser" type="warning"
                         size="mini" plain> 批量设置主用户
              </el-button>
              <el-button v-has="permissionSendDirective" icon="el-icon-position" @click="handleSendDirevtive()"
                         type="warning" size="mini" plain> 批量下发指令
              </el-button>
              <el-button v-has="permissionExportPoster" icon="el-icon-folder-opened" @click="handleExportPoster"
                         type="success" size="mini"> 批量导出海报
              </el-button>
              <el-button v-has="permissionGeneratePoster" icon="el-icon-folder-add"
                         @click="handleGeneratePoster($event, 2)" type="success" plain size="mini"> 批量生成海报
              </el-button>
              <el-button v-has="permissionImportVillageArea" icon="el-icon-plus" @click="handleImportVillageArea"
                         type="success" plain size="mini"> 批量修改栋单元层
              </el-button>
              <!--<el-button type="success" plain icon="el-icon-finished" v-has="permissionBatchSelect"
							@click="handleBatchSelect" size="mini"> 设置推广维护员</el-button>
						<el-button v-has="permissionBatchPromote" @click="handleBatchPromoteSet" type="warning" plain
							icon="el-icon-s-opportunity" size="mini">批量推广设置</el-button>-->

              <!-- <el-button
              v-has="permissionBatchBusiness"
              @click="handleBatchBindBusiness"
              type="danger"
              plain
              icon="fa fa-chain"
              size="mini"
              >批量绑定月结商户</el-button
            > -->
            </div>
            <div>
              <el-button v-has="permissionExportCode" icon="el-icon-folder-opened" @click="handleExportCode" type="info"
                         size="mini" plain> 导出小程序码
              </el-button>
              <el-button v-has="permissionExportBeeper" icon="el-icon-folder-opened" @click="handleExportBeeper"
                         type="success" size="mini" plain> 导出呼叫器
              </el-button>
              <el-button v-has="permissionExportRecord" icon="el-icon-folder-opened" @click="handleExportRecord"
                         type="warning" size="mini"> 导出浏览记录
              </el-button>
              <el-button type="success" plain icon="fa fa-users" v-has="permissionMapUser" @click="handleGoToUserMap"
                         size="mini">用户地图
              </el-button>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row ref="tableRow">
      <el-table
          :data="dataList"
          :fit="true"
          ref="table"
          highlight-selection-row
          @row-click="$refs.table.toggleRowSelection($event)"
          @selection-change="handleSelectionChange"
          highlight-current-row
          v-loading="listLoading"
          element-loading-text="数据加载中，请稍后..."
          empty-text="对不起，没有找到相关数据"
      >
        <el-table-column v-if="userRole === 1 && detailRole === 1" type="selection" width="50"
                         align="center"></el-table-column>
        <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
        <el-table-column prop="equipName" label="呼叫器名称" width="130" align="center"></el-table-column>
        <el-table-column label="编号/MAC/卡号" width="150" align="center">
          <template slot-scope="scope">
            <span> {{ scope.row.equipCode }} </span><br/>
            <span>{{ scope.row.equipMac }}</span>
            <br/>
            <span>{{ scope.row.equipPhone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="呼叫器类型" align="center">
          <template slot-scope="scope">
            <span>
              <el-tag size="mini" effect="dark" :type="formatBeeperTypes(scope.row.beeperType)">
                {{ formatBeeperType(scope.row.beeperType) }}
              </el-tag> </span
            ><br/>
            <span>{{ $Filters.formatBeeperVersion(scope.row.beeperVersion) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="连网方式" align="center">
          <template slot-scope="scope">
            <span>{{ $Filters.formatLinkWay(scope.row.linkWay) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="呼叫器分类" prop="classifyName" align="center"></el-table-column>
        <el-table-column width="100" label="联系人" align="center" prop="linkName"></el-table-column>
        <el-table-column width="100" label="联系电话" align="center" prop="phone"></el-table-column>
        <el-table-column align="center" label="联系地址" prop="address" width="200px"></el-table-column>
        <el-table-column align="center" label="最新服务" width="180px">
          <template slot-scope="scope" v-if="scope.row.serverName">
            <span>{{ scope.row.serverName }}</span
            ><br/>
            <span>{{ scope.row.businessName }}</span
            ><br/>
            <span>{{ scope.row.serverDate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="呼叫器状态" lign="center" width="100" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.beeperVersion !== 1">
              <el-tag size="mini" effect="dark" :type="formatBeeperStates(scope.row.equipState)">
                {{ formatBeeperState(scope.row.equipState) }}
              </el-tag>
            </span>
            <span v-if="scope.row.beeperVersion === 1">
              <el-tag size="mini" effect="dark" :type="scope.row.equipState === 1 ? '' : 'success'">
                {{ scope.row.equipState === 1 ? '未激活' : '在线' }}
              </el-tag>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" width="100">
          <template slot-scope="scope">
            <span>
              <el-tag size="mini" effect="dark" :type="$Filters.formatStates(scope.row.state)">
                {{ $Filters.formatState(scope.row.state) }}
              </el-tag>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="createDate" label="创建时间" width="90" align="center"></el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="200px">
          <template slot-scope="scope">
            <el-button v-has="permissionBeeper" @click.stop.native="handleBeeperRecord(scope.row)" size="mini">
              呼叫记录
            </el-button>
            <el-button v-has="permissionCheck" @click.stop="handleClickDetail(scope.row)" size="mini">查看</el-button>
            <el-dropdown trigger="click" size="small">
              <el-button type="primary" @click.stop=""><i class="fa fa-list-ul"></i>更多</el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-has="permissionEdit" @click.stop.native="handleClickEditor(scope.row)">编辑
                </el-dropdown-item>
                <el-dropdown-item v-has="permissionUpStatus" @click.native="handleIsDisable(scope.row)">
                  {{ scope.row.state === 0 ? '启用' : '禁用' }}
                </el-dropdown-item>
                <el-dropdown-item v-has="permissionDelete" @click.native="handleClickDelete(scope.row)">删除
                </el-dropdown-item>
                <el-dropdown-item v-has="permissionGeneratePoster" @click.native="handleGeneratePoster(scope.row, 1)">
                  生成海报
                </el-dropdown-item>
                <!-- <el-dropdown-item
                  v-has="permissionHeartbeat"
                  v-if="scope.row.beeperVersion != 1"
                  @click.native="handleHeartbeatRecord(scope.row)"
                  >心跳记录</el-dropdown-item
                > -->
                <el-dropdown-item v-has="permissionResetUrl" @click.native="handleClickResetUrl(scope.row)">重置二维码
                </el-dropdown-item>
                <el-dropdown-item v-has="permissionReset"
                                  @click.native="handleClickResetOrDelete(scope.row.beeperId, 0)">恢复出厂设置
                </el-dropdown-item>
                <el-dropdown-item v-has="permissionModifyMainUser" @click.native="editMainUser(scope.row)">更改主用户
                </el-dropdown-item>
                <template v-if="scope.row.beeperVersion >= 4 && scope.row.beeperVersion <= 7">
                  <el-dropdown-item v-has="permissionSendDirective" @click.native="handleSendDirevtive(scope.row)">
                    下发指令
                  </el-dropdown-item>
                  <el-dropdown-item v-has="permissionSendDirective" @click.native="handleDirectiveRecord(scope.row)">
                    指令记录
                  </el-dropdown-item>
                  <el-dropdown-item v-has="permissionMovementPath" @click.native="handleMovementTrack(scope.row)">
                    运动轨迹
                  </el-dropdown-item>
                </template>
                <el-dropdown-item v-has="permissionForceDelete"
                                  @click.native="handleClickResetOrDelete(scope.row.beeperId, -1)">强制删除
                </el-dropdown-item>
                <!-- <el-dropdown-item v-has="permissionUserList" @click.native="handleUserList(scope.row)">
									用户列表</el-dropdown-item> -->
                <el-dropdown-item v-has="permissionInspect" @click.native="handleClickInspect(scope.row.beeperId, -1)">
                  设置送检方
                </el-dropdown-item>
                <el-dropdown-item v-has="permissionEditContact" @click.native="handleClickContact(scope.row)">
                  修改联系人
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.pageNo"
          :page-sizes="[20, 50, 100]"
          :page-size="page.pageSize"
          layout="total, sizes, jumper, next, pager, prev"
          :total="page.pageTotal"
      ></el-pagination>
    </el-row>

    <!-- 批量选择人员 已作废20230926-->
    <!--		<el-dialog :visible.sync="selectPersonnelDialog" title="选择人员" width="400px" :center="true">
			<el-form :data="selectPersonnelForm" style="padding-left:22px">
				<el-form-item label="推广员" prop="promoterId">
					<el-select v-model="selectPersonnelForm.promoterId" placeholder="请选择推广员">
						<el-option v-for="item in roleList" :value="item.id" :label="item.name" :key="item.id">

						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="维护员" prop="keeperId ">
					<el-select v-model="selectPersonnelForm.keeperId" placeholder="请选择维护员">
						<el-option v-for="item in roleList" :value="item.id" :label="item.name" :key="item.id">

						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="selectPersonnelDialog = false">取 消</el-button>
				<el-button type="primary" @click="handleSure">确 定</el-button>
			</span>
		</el-dialog>-->

    <!-- 呼叫器批量绑定商户 -->
    <el-dialog title="批量绑定商户" :visible.sync="bindBusiness.show" center width="fit-content">
      <div>
        <el-select v-model="bindBusiness.businessIds" placeholder="请选择商户" style="width: 300px" multiple>
          <el-option v-for="item in businessList" :value="item.id" :label="item.name" :key="item.id"></el-option>
        </el-select>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="bindBusiness.show = false">取 消</el-button>
        <el-button type="primary" @click="confirmBindBusiness">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 批量设置主用户 -->
    <el-dialog title="批量设置主用户" :visible.sync="setMUser.show" center width="fit-content"
               :close-on-click-modal="false">
      <el-select v-model="setMUser.customerId" placeholder="请选择主用户" style="width: 300px">
        <el-option v-for="item in customerList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <div slot="footer">
        <el-button type="primary" @click="confirmSetMUser"> 确定</el-button>
        <el-button @click="setMUser.show = false"> 取消</el-button>
      </div>
    </el-dialog>

    <!-- 导出浏览记录 -->
    <el-dialog title="选择时间" :visible.sync="exportRecord.show" center width="fit-content"
               class="custom-size__dialog">
      <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" v-model="exportRecord.time"
                      start-placeholder="开始时间" end-placeholder="结束时间"></el-date-picker>
      <div slot="footer">
        <el-button type="primary" @click="confirmExportRecord"> 确定</el-button>
        <el-button @click="exportRecord.show = false"> 取消</el-button>
      </div>
    </el-dialog>

    <!-- 生成海报 -->
    <el-dialog :title="poster.title" :visible.sync="poster.show" center width="fit-content" class="custom-size__dialog">
      <el-select v-model="poster.posterModelId" placeholder="请选择海报模板">
        <el-option v-for="item in posterModelList" :value="item.id" :label="item.name" :key="item.id"></el-option>
      </el-select>
      <div slot="footer">
        <el-button type="primary" @click="confirmGeneratePoster"> 确定</el-button>
        <el-button @click="poster.show = false"> 取消</el-button>
      </div>
    </el-dialog>

    <!-- 批量修改栋单元层 -->
    <el-dialog title="批量修改栋单元层" :visible.sync="importVillageArea.show" width="fit-content" center
               :close-on-click-modal="false">
      <div style="margin: 50px 100px">
        <el-upload :class="['upload', importVillageArea.file ? '' : 'no-file']" action="#" :auto-upload="false"
                   :on-change="getVillageAreaFile" accept=".xls,.xlsx" :show-file-list="false">
          <i v-if="!importVillageArea.file" class="el-icon-plus"></i>
          <div class="excel-file" v-else>
            <img src="/src/assets/img/excel.png" alt=""/>
            <div>
              {{ importVillageArea.file.name }}
            </div>
          </div>
        </el-upload>
        <div style="margin-top: 4px">
          <a style="color: red; text-decoration: none" :href="importVillageArea.importModule"> 下载导入模板 </a>
        </div>
      </div>
      <div slot="footer">
        <el-button @click="confirmImportVillageArea" type="primary">确定</el-button>
        <el-button @click="importVillageArea.show = false">取消</el-button>
      </div>
    </el-dialog>
    <!-- 下发指令/指令列表 -->
    <Directives :tabName="directiveName" :equipId="equipId" :beeperId="beeperId" @closeDialog="closeDirective"
                :dataItem="beeperData" :ids="selectPersonnelForm.ids" :show="directiveShow"/>
    <!-- 呼叫记录 -->
    <BeeperRecordTable ref="beeperRecordTable"></BeeperRecordTable>
    <!-- 心跳记录 -->
    <HeartbeatTable ref="heartbeatTable"></HeartbeatTable>
    <!-- 推广设置已作废20230926 -->
    <!--		<PromoteSet @cancel="showPromoteSet = false" @confirm="confirmPromotSet" :type="2" :show="showPromoteSet"
			:list="promoteList" />-->

    <el-dialog title="修改联系人" :visible.sync="editContactShow" width="fit-content" center
               :close-on-click-modal="false">
      <el-form label-width="100px">
        <el-form-item label="联系人">
          <el-input v-model="contactForm.linkName"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input type="number" v-model="contactForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="备用电话">
          <el-input type="number" v-model="contactForm.phoneTwo"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="editContactConfirm" type="primary">确定</el-button>
        <el-button @click="editContactCancel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as message from '@/constants/message';
import BeeperRecordTable from '@/components/BeeperRecordTable';
import HeartbeatTable from '@/components/HeartbeatTable';
import BeeperApi from '@/api/equip/beeper';
import BusinessApi from '@/api/business/business';
import LoginApi from '@/api/system/login';
import VillageApi from '@/api/address/village';
import UploadOss from '@/components/UploadOss.vue';
import BeeperClassifyApi from '@/api/equip/beeperClassify';
import PosterModelApi from '@/api/operation/posterModel';
import {getStorage} from '@/utils/auth';
import {USER_INFO} from '@/constants/storeName';
import fileDownload from 'js-file-download';
import mixins from '@/mixins/mixins';
import {BEEPER_POSTER_BATCH_DOWN, BEEPER_VILLAGEAREA_IMPORT} from '@/constants/constants';
import uploadOssFn from '@/utils/uploadOssFn';
import Directives from '@/components/Directives.vue';
import VillageAreaApi from '@/api/address/villageArea';
import LocaleApi from '@/api/address/locale';

export default {
  name: 'BeeperManagement',
  inject: ['reload'], //注入局部刷新
  mixins: [mixins],
  data() {
    return {
      directiveShow: false,
      userRole: '',
      detailRole: '',
      dataList: [],
      listLoading: true,
      selectPersonnelDialog: false, //是否展示选择人员弹框
      selectPersonnelForm: {
        //选择人员要提交的数据
        ids: [],
        keeperId: '',
        promoterId: '',
      },
      equipId: 0,
      userListDialog: false, //是否展示用户列表弹框
      userList: [], //用户列表
      filters: {
        equipName: '',
        beeperType: '',
        beeperVersion: '',
        classifyId: '',
        linkName: '',
        phone: '',
        address: '',
        villageId: '',
        equipState: '',
        residentAddress: '',
        mergeValue:''
      },
      contactForm: {
        linkName: '',
        phone: '',
        phoneTwo: '',
      },
      residentAddressList: [],
      page: {
        pageNo: 1,
        pageTotal: 0,
        pageSize: 20,
      },
      // 权限

      permissionAdd: 'SYSTEM_MANAGER_EQUIP_BEEPER_LIST_ADD',
      permissionCheck: 'SYSTEM_MANAGER_EQUIP_BEEPER_LIST_SEE',
      permissionEdit: 'SYSTEM_MANAGER_EQUIP_BEEPER_LIST_EDIT',
      //permissionBatchPromote: "SYSTEM_MANAGER_EQUIP_BEEPER_LIST_BATCH_PROMOTE",
      permissionResetUrl: 'SYSTEM_MANAGER_EQUIP_BEEPER_LIST_RESET_URL',
      permissionDelete: 'SYSTEM_MANAGER_EQUIP_BEEPER_LIST_DELETE',
      permissionReset: 'SYSTEM_MANAGER_EQUIP_BEEPER_LIST_RESET',
      permissionForceDelete: 'SYSTEM_MANAGER_EQUIP_BEEPER_LIST_FORCE_DELETE',
      permissionBeeper: 'SYSTEM_MANAGER_EQUIP_BEEPER_LIST_BEEPER',
      permissionHeartbeat: 'SYSTEM_MANAGER_EQUIP_BEEPER_LIST_HEARTBEAT',
      permissionUpStatus: 'SYSTEM_MANAGER_EQUIP_BEEPER_LIST_STATE',
      //permissionBatchSelect: "SYSTEM_MANAGER_EQUIP_BEEPER_LIST_BATCH_SETMANAGER",
      permissionUserList: 'SYSTEM_MANAGER_EQUIP_BEEPER_LIST_USERLIST',
      permissionSetMain: 'SYSTEM_MANAGER_EQUIP_BEEPER_LIST_USERLIST_SETMAIN',
      permissionEnable: 'SYSTEM_MANAGER_EQUIP_BEEPER_LIST_USERLIST_ENABLE',
      permissionBatchBusiness: 'SYSTEM_MANAGER_EQUIP_BEEPER_LIST_BATCH_BUSINESS',
      permissionExportCode: 'SYSTEM_MANAGER_EQUIP_BEEPER_LIST_EXPORT_CODE',
      permissionExportBeeper: 'SYSTEM_MANAGER_EQUIP_BEEPER_LIST_EXPORT_BEEPER',
      permissionSetMainUser: 'SYSTEM_MANAGER_EQUIP_BEEPER_LIST_MAIN_USER',
      permissionExportRecord: 'SYSTEM_MANAGER_EQUIP_BEEPER_LIST_EXPORT_RECORD',
      permissionGeneratePoster: 'SYSTEM_MANAGER_EQUIP_BEEPER_LIST_GENERATE_POSTER',
      permissionExportPoster: 'SYSTEM_MANAGER_EQUIP_BEEPER_LIST_EXPORT_POSTER',
      permissionModifyMainUser: 'SYSTEM_MANAGER_EQUIP_BEEPER_LIST_MODIFY_MAINUSER',
      permissionBatchModify: 'SYSTEM_MANAGER_EQUIP_BEEPER_LIST_BATCH_MODIFY',
      permissionSendDirective: 'SYSTEM_MANAGER_EQUIP_BEEPER_LIST_SEND_DIRECTIVE',
      permissionImportVillageArea: 'SYSTEM_MANAGER_EQUIP_BEEPER_LIST_IMPORT_VILLAGEAREA',
      permissionInspect: 'SYSTEM_MANAGER_EQUIP_BEEPER_LIST_INSPECT',
      permissionMovementPath: 'SYSTEM_MANAGER_EQUIP_BEEPER_LIST_VIEW_MOVEMENT_PATH',
      permissionMapUser: 'SYSTEM_MANAGER_EQUIP_BEEPER_LIST_MAP_USERS',
      permissionEditContact: 'SYSTEM_MANAGER_EQUIP_BEEPER_LIST_EDIT_CONTACT',
      beeperTypeList: [
        //呼叫器类型列表
        {id: 1, name: '公共'},
        {id: 2, name: '专属'},
      ],
      beeperVersionList: [
        // 呼叫器版本（1.虚拟版 2.基础版 3.智能版 4.触屏版 ）
        {id: 1, name: '虚拟版'},
        {id: 2, name: '基础版'},
        {id: 3, name: '智能版'},
        {id: 4, name: '119报警版'},
        {id: 5, name: '110报警版'},
        {id: 6, name: '120急救版'},
        {id: 7, name: '综合报警版'},
        {id: 8, name: '物业版'},
      ],
      directiveList: [
        {id: 1, name: '获取经纬度'},
        {id: 2, name: '获取电量'},
        {id: 3, name: '获取常用联系人'},
        {id: 4, name: '获取微聊好友'},
        /* { id: 5, name: "获取紧急联系人" },*/
        {id: 6, name: '获取配置信息'},
        {id: 20, name: '设置常用联系人'},
        {id: 21, name: '设置微聊好友'},
        {id: 22, name: '设置紧急联系电话'},
        {id: 23, name: '设置功能开关'},
        {id: 24, name: '设置语音识别开关'},
        {id: 25, name: '设置低电提醒开关'},
        {id: 28, name: '设备重启'},
        {id: 29, name: '设备关机'},
        {id: 30, name: '发送文字播报'},
      ],
      roleList: [],
      selectedBeeperId: '',
      promoteList: [],
      beeperClassifyList: [],
      promoteBatch: false,
      showPromoteSet: false,
      bindBusiness: {
        show: false,
        businessIds: [],
      },
      setMUser: {
        show: false,
        customerId: '',
        // list: []
      },
      exportRecord: {
        show: false,
        time: [],
      },
      poster: {
        show: false,
        title: '',
        posterModelId: '',
      },
      importVillageArea: {
        file: '', // 文件路径
        show: false,
        importModule: BEEPER_VILLAGEAREA_IMPORT,
      },
      directiveRecord: {
        list: [],
        show: false,
      },
      posterModelList: [],
      businessList: [],
      villageList: [],
      rowItem: {},
      customerList: [], //主用户列表
      beeperId: 0,
      beeperData: '{}',
      directiveName: 'typeA',
      editContactShow: false,
    };
  },
  components: {
    BeeperRecordTable,
    HeartbeatTable,
    UploadOss,
    Directives,
  },
  watch: {
    'selectPersonnelForm.ids': {
      handler(value) {
        if (value.length === 0) {
          this.timer = setInterval(() => {
            this.listData();
          }, 60000);
        } else {
          clearInterval(this.timer);
        }
      },
      immediate: true,
    },
  },
  computed: {},
  mounted() {
    // console.log([{id:1,name:"小明"}].find(item=>item.id==1)?.name);
    this.init();
  },
  activated() {
    // 参数传递
    let mergeValue = this.$route.query.mergeValue || this.$route.params.mergeValue;
    if (this.$route.params.list) {
      this.listData();
    }
    if (mergeValue) {
      this.filters.mergeValue = mergeValue;
      this.listData();
    }

    this.$nextTick(() => {
      this.$refs.table.doLayout();
      this.$refs.table.bodyWrapper.scrollTop = 0;
    });
  },
  deactivated() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    init() {
      this.userRole = getStorage(USER_INFO).userRole;
      this.detailRole = getStorage(USER_INFO).detailRole;
      this.listLoading = true;
      // 参数传递
      let mergeValue = this.$route.query.mergeValue || this.$route.params.mergeValue;
      if (mergeValue) {
        this.filters.mergeValue = mergeValue;
      }

      this.listData();
      this.getBusinessList();
      this.getRoleInfoList();
      this.getBeeperClassifyList();
      this.getVillageList();
      this.getPosterModelList();
      this.getUserList();
    },
    /**
     * 进入运动轨迹界面
     */
    handleMovementTrack(row) {
      const {equipId, equipName} = row;
      this.$router.push({
        path: '/equip/watchMovementPath',
        query: {equipId, equipName},
      });
    },
    getBeeperClassifyList() {
      BeeperClassifyApi.beeperClassifyList().then((res) => {
        this.beeperClassifyList = res.data;
      });
    },
    getVillageList() {
      VillageApi.villageList({}).then((res) => {
        this.villageList = res.data;
      });
    },
    // 获取商户列表
    getBusinessList() {
      BusinessApi.listIdNameVo().then((res) => {
        this.businessList = res.data;
      });
    },
    // 获取海报模板列表
    getPosterModelList() {
      PosterModelApi.listPosterModelIdName().then((res) => {
        this.posterModelList = res.data;
      });
    },
    // 获取用户列表
    getUserList() {
      BeeperApi.customerList().then((res) => {
        this.customerList = res.data.filter((item) => item.value);
      });
    },
    // 批量推广设置
    /*handleBatchPromoteSet() {
      if (this.selectPersonnelForm.ids.length == 0) {
        this.$message.error("请至少选择一项")
        return
      }
      this.promoteList = []
      this.promoteBatch = true
      this.showPromoteSet = true
    },
    // 单个推广设置
    handlePromoteSet(row) {
      this.promoteBatch = false
      this.selectedBeeperId = row.beeperId
      PromoteRuleApi.promoteProfitList({ beeperId: row.beeperId }).then(res => {
        this.promoteList = res.data
        this.showPromoteSet = true
      })
    },
    confirmPromotSet() {
      let params = {
        list: this.promoteList,
        type: 2
      }
      if (this.promoteBatch) {
        params.ids = this.selectPersonnelForm.ids
      } else {
        params.id = this.selectedBeeperId
      }
      PromoteRuleApi.setPromoteProfit(params).then(res => {
        this.$Utils.notifySuccess("设置成功")
        this.showPromoteSet = false
        this.listData()
      })
    },*/
    getRoleInfoList() {
      LoginApi.roleInfoList().then((res) => {
        this.roleList = res.data;
      });
    },
    handleClickInspect(e) {
      let that = this;
      that
          .$prompt('请输入送检机构名称', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputPattern: /^\S+$/,
            inputErrorMessage: '内容不能为空',
          })
          .then(({value}) => {
            BeeperApi.setInspect({
              beeperId: e,
              sourceName: value,
            })
                .then((res) => {
                  if (res.status === 0) {
                    that.$message.success('操作成功');
                  }
                })
                .catch((error) => {
                  that.$message.fail(error.msg);
                });
          })
          .catch(() => {
          });
    },
    handleSelectionChange(value) {
      this.selectPersonnelForm.ids = value.map((item) => item.beeperId);
      this.selectPersonnelForm.list = value;
    },
    handleBatchBindBusiness() {
      const {selectPersonnelForm} = this;
      if (!selectPersonnelForm.ids.length) {
        this.$message.error('请至少选择一项');
        return;
      }
      this.bindBusiness.businessIds = [];
      this.bindBusiness.show = true;
    },
    confirmBindBusiness() {
      const {bindBusiness, selectPersonnelForm} = this;
      if (!bindBusiness.businessIds.length) {
        this.$message.error('请选择商户');
        return;
      }
      const params = {
        beeperIds: selectPersonnelForm.ids,
        businessIds: bindBusiness.businessIds,
      };
      this.$confirm('确认批量绑定商户？', '提示', {}).then(() => {
        BeeperApi.batchSetBB(params).then(() => {
          this.$Utils.notifySuccess('绑定成功');
          bindBusiness.show = false;
          this.listData();
        });
      });
    },
    // 导出呼叫器码
    handleExportCode() {
      if (this.selectPersonnelForm.ids.length === 0) {
        this.$message.error('请至少选择一项');
        return;
      }
      const beeperIds = this.selectPersonnelForm.ids ? this.selectPersonnelForm.ids.toString() : '';

      const params = {
        mergeValue:this.filters.mergeValue,
        equipName: this.filters.equipName,
        beeperType: this.filters.beeperType,
        beeperVersion: this.filters.beeperVersion,
        classifyId: this.filters.classifyId,
        linkName: this.filters.linkName,
        phone: this.filters.phone,
        address: this.filters.address,
        villageId: this.filters.villageId,
        beeperIds,
      };

      // const theader = ['呼叫器名称','编号','MAC地址']
      // const dataname=['equipName','equipCode','equipMac']
      this.$confirm('确定导出呼叫器小程序码？', '提示', {}).then(() => {
        let loading = this.$loading({
          lock: true,
          text: '导出中',
          background: 'rgba(0, 0, 0, 0.7)',
        });
        BeeperApi.exportBeeper(params)
            .then((res) => {
              fileDownload(res, '呼叫器列表.xlsx');
            })
            .finally(() => {
              loading.close();
            });
      });
    },
    // 导出呼叫器
    async handleExportBeeper() {
      if (this.page.pageTotal > 1000) {
        this.$message.error('呼叫器数量超过1000个，请选择筛选条件分批导出');
        return false;
      }
      this.$confirm('确定导出呼叫器吗？', '提示', {}).then(() => {
        let loading = this.$loading({
          lock: true,
          text: '导出中',
          background: 'rgba(0, 0, 0, 0.7)',
        });
        const {
          mergeValue,
          equipName,
          beeperType,
          beeperVersion,
          classifyId,
          linkName,
          phone,
          address,
          villageId
        } = this.filters;
        const params = {
          mergeValue,
          equipName,
          beeperType,
          beeperVersion,
          classifyId,
          linkName,
          phone,
          address,
          villageId,
        };
        BeeperApi.exportBeeperInfo(params)
            .then((res) => {
              fileDownload(res, '呼叫器列表.xlsx');
            })
            .finally(() => {
              loading.close();
            });
      });
    },
    // 通过小区获取栋单元层下的数据
    async getResidentAddressList() {
      const {data} = await VillageAreaApi.getListTree({
        villageId: this.filters.villageId,
      });
      this.residentAddressList = data || [];
    },
    // 批量设置主用户
    handleSetMUser() {
      const {selectPersonnelForm, setMUser} = this;
      if (!selectPersonnelForm.ids.length) {
        this.$message.error('请至少选择一项');
        return;
      }
      setMUser.show = true;
    },
    // handleMUserImport(file) {
    //   const { setMUser } = this;
    //   importExcel(file, 0, ["fullName", "phone"]).then(res => {
    //     setMUser.list = setMUser.list.concat(res);
    //   });
    // },
    // addUser() {
    //   this.setMUser.list.push({
    //     fullName: "",
    //     phone: ""
    //   });
    // },
    // subUser(index) {
    //   this.setMUser.list.splice(index, 1);
    // },
    async confirmSetMUser() {
      const {setMUser, selectPersonnelForm} = this;
      const {customerId} = setMUser;
      if (!customerId) return this.$message.error('请选择主用户');
      const params = {
        customerId,
        beeperIds: selectPersonnelForm.ids,
      };
      await this.$confirm('确定设置？', '提示', {});
      await BeeperApi.batchSetMain(params);
      this.$Utils.notifySuccess();
      setMUser.list = [];
      setMUser.show = false;
      setMUser.customerId = '';
    },
    //修改主用户
    async editMainUser(e) {
      LocaleApi.getLocaleInfo({beeperId: e.beeperId}).then((res) => {
        if (res.data == null || res.data.localeId == null) {
          this.$message.error('当前呼叫器不存在场所Id');
          return false;
        }
        this.$router.push({path: '/address/localeDetail', query: {id: res.data.localeId}});
      });
    },
    // 点击导出浏览记录
    handleExportRecord() {
      const {
        exportRecord,
        selectPersonnelForm: {ids},
      } = this;
      if (ids.length === 0) return this.$message.error('请至少选择一个呼叫器');
      exportRecord.show = true;
    },
    confirmExportRecord() {
      const {
        exportRecord,
        selectPersonnelForm: {ids},
      } = this;
      exportRecord.show = false;
      const {time} = exportRecord;
      const params = {
        beginDate: time ? time[0] : '',
        endDate: time ? time[1] : '',
        beeperIds: ids.toString(),
      };
      let loading = this.$loading({
        lock: true,
        text: '导出中',
        background: 'rgba(0, 0, 0, 0.7)',
      });
      BeeperApi.exportBtnData(params)
          .then((res) => {
            fileDownload(res, '呼叫器浏览记录.xlsx');
          })
          .finally(() => {
            loading.close();
          });
    },
    // 批量导出海报
    async handleExportPoster() {
      const {
        selectPersonnelForm: {ids},
      } = this;
      if (ids.length === 0) {
        this.$message.error('请至少选择一项数据');
        return;
      }

      await this.$confirm('确定批量导出海报吗？', '提示', {});
      this.$Utils.downloadFiles(ids.toString(), BEEPER_POSTER_BATCH_DOWN);

      //const res = await BeeperApi.batchDownPoster(params)
      //fileDownload(res, "海报.zip");

      /*if (_this.selectIds.length > 0) {
        this.$confirm(
          "是否批量下载" + _this.selectIds.length + "个报告单？",
          message.TITLE_PROMPT,
          {}
        ).then(() => {
          let ids = _this.selectIds.toString();
          _this.$Utils.downloadFiles(ids, constants.BEEPER_POSTER_BATCH_DOWN);
        });
      } else {
        _this.$Utils.messageError("请选择你要下载的报告单！");
      }*/
    },

    handleSizeChange(size) {
      let _this = this;
      _this.page.pageSize = size;
      _this.listData();
    },
    handleCurrentChange(val) {
      let _this = this;
      _this.page.pageNo = val;
      _this.listData();
    },
    // 呼叫器版本（1.虚拟版 2.基础版 3.智能版 4.触屏版 ）

    formatBeeperType(cellValue) {
      if (cellValue === 1) {
        return '公共';
      } else if (cellValue === 2) {
        return '专属';
      }
    },
    formatBeeperTypes(cellValue) {
      if (cellValue === 2) {
        return 'success';
      } else if (cellValue === 1) {
        return 'danger';
      }
    },
    formatBeeperState(cellValue) {
      if (cellValue === 0) {
        return '未开通';
      } else if (cellValue === 1) {
        return '待连接';
      } else if (cellValue === 2) {
        return '在线';
      } else if (cellValue === 3) {
        return '离线';
      }
    },
    formatBeeperStates(cellValue) {
      if (cellValue === 0) {
        return 'danger';
      } else if (cellValue === 1) {
        return '';
      } else if (cellValue === 2) {
        return 'success';
      } else if (cellValue === 3) {
        return 'info';
      }
    },
    formatRecordState(row, column, cellValue) {
      if (cellValue === 1) {
        return '待接单';
      } else if (cellValue === 2) {
        return '已接单';
      } else if (cellValue === 3) {
        return '已取消';
      } else if (cellValue === 4) {
        return '取消失败';
      } else if (cellValue === 20) {
        return '已完成';
      }
    },
    resetForm() {
      this.$refs.searchForm.resetFields();
      this.onSearch();
    },
    onSearch() {
      this.listLoading = true;
      this.page.pageNo = 1;
      this.listData();
    },
    listData() {
      let _this = this;
      let cond = {
        pageNo: _this.page.pageNo,
        pageSize: _this.page.pageSize,
        equipName: _this.filters.equipName,
        mergeValue:_this.filters.mergeValue,
        beeperType: _this.filters.beeperType,
        beeperVersion: _this.filters.beeperVersion,
        classifyId: _this.filters.classifyId,
        equipState: _this.filters.equipState,
        linkName: _this.filters.linkName,
        phone: _this.filters.phone,
        address: _this.filters.address,
        villageId: _this.filters.villageId,
        floorId: _this.filters.residentAddress[2] || '',
        unitId: _this.filters.residentAddress[1] || '',
        buildId: _this.filters.residentAddress[0] || '',
        houseNumberId: _this.filters.residentAddress[3] || '',
      };
      // 发送请求
      BeeperApi.listBeeper(cond)
          .then((res) => {
            _this.listLoading = false;
            _this.dataList = res.data.list;
            _this.page.pageTotal = res.data.total;
            _this.$nextTick(() => {
              _this.$refs.table.doLayout();
              _this.$refs.table.bodyWrapper.scrollTop = 0;
            });
          })
          .catch((err) => {
            _this.listLoading = false;
          });
    },
    // 生成海报
    handleGeneratePoster(row, type) {
      const {
        poster,
        selectPersonnelForm: {ids},
      } = this;
      poster.type = type;
      poster.title = type === 1 ? '生成海报' : '批量生成海报';

      if (type === 2 && ids.length === 0) {
        this.$message.error('请至少选择一项数据');
        return;
      } else {
        this.rowItem = row;
      }
      poster.show = true;
    },
    // 确定生成海报
    confirmGeneratePoster() {
      const {
        poster,
        selectPersonnelForm: {ids},
        rowItem,
      } = this;
      if (!poster.posterModelId) {
        this.$message.error('请选择海报模板');
        return;
      }
      poster.show = false;
      const params = {
        posterModelId: poster.posterModelId,
      };

      if (poster.type === 1) {
        params.beeperId = rowItem.beeperId;
        PosterModelApi.createPoster(params).then((res) => {
          const data = res.data;
          this.$Utils.downFileByUrl(data, 'poster');
          // this.$Utils.notifySuccess("生成成功，在详情查看")
        });
      } else {
        params.beeperIds = ids;
        //  this.$Utils.notifySuccess("可在详情里面查看海报是否生成")
        this.$message.warning('可在详情里面查看海报是否生成');
        PosterModelApi.batchCreatePoster(params).then((res) => {
          // this.$Utils.notifySuccess("生成成功，在详情查看")
        });
      }
    },
    // 导入栋单元层
    handleImportVillageArea() {
      this.importVillageArea.file = '';
      this.importVillageArea.show = true;
    },
    getVillageAreaFile(val) {
      this.importVillageArea.file = val;
    },
    // 确定导入栋单元层
    async confirmImportVillageArea() {
      const {importVillageArea} = this;
      let res = await uploadOssFn([importVillageArea.file], 'importVillageArea');
      await BeeperApi.formRefineAddress({url: res[0].url});
      this.$message.success('导入成功');
      importVillageArea.show = '';
    },
    // 调用呼叫器记录
    handleBeeperRecord(row) {
      this.$refs.beeperRecordTable.handleCreate(row.beeperId);
    },
    // 调用心跳记录
    handleHeartbeatRecord(row) {
      this.$refs.heartbeatTable.handleCreate(row.equipId);
    },
    // 调用用户列表
    handleUserList(row) {
      BeeperApi.listUser({beeperId: row.beeperId}).then((res) => {
        this.beeperId = row.beeperId;
        this.userList = res.data;
        this.userListDialog = true;
      });
    },
    // 下发指令
    handleSendDirevtive(row) {
      this.directiveName = 'typeA';
      if (row) {
        this.beeperId = row.beeperId;
        this.beeperData = JSON.stringify(row);
        this.equipId = row.equipId;
      } else {
        this.beeperData = '{}';
        if (!this.selectPersonnelForm.ids.length) return this.$message.error('请选择呼叫器');
      }
      this.directiveShow = true;
    },
    closeDirective(e) {
      this.directiveShow = e;
      this.beeperId = 0;
      this.equipId = 0;
      this.beeperData = '{}';
      this.directiveName = 'typeA';
    },

    // 查看指令记录
    handleDirectiveRecord(row) {
      this.handleSendDirevtive(row);
      this.directiveName = 'typeB';
    },
    handleIsDisable(row) {
      let currentState = row.state === 0 ? 1 : 0;
      this.$confirm(currentState ? '是否启用？' : '是否禁用', message.TITLE_PROMPT, {}).then(() => {
        BeeperApi.deleteBeeper({
          id: row.beeperId,
          state: currentState,
        }).then((res) => {
          this.$Utils.notifySuccess();
          this.listData();
        });
      });
    },
    handleClickDelete(val) {
      // 删除
      this.$confirm('是否删除该呼叫器', message.TITLE_PROMPT, {}).then(() => {
        var cond = {
          id: val.beeperId,
          state: -1,
        };
        BeeperApi.deleteBeeper(cond).then((data) => {
          this.$Utils.notifySuccess();
          this.listData();
        });
      });
    },
    handleClickDetail(row) {
      let _this = this;
      _this.$router.push({
        path: '/equip/beeperDetail',
        query: {id: row.beeperId},
      });
    },
    handleClickEditor(val) {
      //编辑 进入新增页通过id来查找数据
      let _this = this;
      _this.$router.push({
        path: '/equip/beeperEdit',
        query: {id: val.beeperId},
      });
    },
    handleClickResetUrl(val) {
      // 重置二维码
      let _this = this;
      BeeperApi.beeperResetUrl({beeperId: val.beeperId}).then((res) => {
        _this.$message.success('重置成功！');
      });
    },
    handleClickResetOrDelete(beeperId, state) {
      // 初始化呼叫器
      let _this = this;
      _this.$confirm(state===-1?'是否强制删除该呼叫器？':'该呼叫器是否需要初始化？', message.TITLE_PROMPT, {}).then(() => {
        let param = {id: beeperId, state: state};
        BeeperApi.beeperResetOrDelete(param).then((res) => {
          _this.$Utils.notifySuccess();
          _this.listData();
        });
      });
    },
    handleClickBatchReOrDelete(state) {
      const {ids} = this.selectPersonnelForm;
      if (!ids.length) return this.$message.error('请至少选择一项');
      this.$confirm('是否批量删除呼叫器', message.TITLE_PROMPT, {}).then(() => {
        let param = {ids, state: state};
        BeeperApi.beeperBatchResetOrDelete(param).then((res) => {
          this.$Utils.notifySuccess();
          this.listData();
        });
      });
    },
    handleClickAdd() {
      this.$router.push('/equip/beeperAdd');
    },
    handleClickBatchAdd() {
      this.$router.push({
        path: '/equip/beeperAdd',
        query: {
          batchAdd: true,
        },
      });
    },
    handleClickBatchModify() {
      const {ids} = this.selectPersonnelForm;
      if (!ids.length) return this.$message.error('请至少选择一项数据');
      localStorage.setItem('beeperIds', JSON.stringify(ids));
      this.$router.push({
        path: '/equip/beeperBatchModify',
      });
    },
    // 用户列表设置主用户
    handleMainUser(row) {
      let params = {
        beeperId: this.beeperId,
        customerId: row.id,
        type: 1,
      };
      BeeperApi.setMainUser(params).then((res) => {
        this.$message.success('设置成功！');
        this.handleUserList({beeperId: this.beeperId});
      });
    },
    // 用户列表启用
    handleEnableUser(row) {
      let params = {
        beeperId: this.beeperId,
        customerId: row.id,
        type: 1,
      };
      BeeperApi.removeDisable(params).then((res) => {
        this.$message.success('启用成功！');
        this.handleUserList({beeperId: this.beeperId});
      });
    },
    /**
     * 前往用户地图界面
     */
    handleGoToUserMap() {
      const {selectPersonnelForm, setMUser} = this;
      if (!selectPersonnelForm.list.length) {
        this.$message.error('请至少选择一项');
        return;
      }
      for (let item of selectPersonnelForm.list) {
        if (item.beeperVersion !== 6) {
          this.$message.error('多选呼叫器中存在“非全网通版本呼叫器”，请重新选择');
          return;
        }
      }
      const equipIds = selectPersonnelForm.list.map((item) => item.equipId);
      this.$router.push({
        path: '/equip/watchUserMap',
        query: {equipIds: equipIds.toString()},
      });
    },
    handleClickContact(row) {
      this.beeperId = row.beeperId;
      this.editContactShow = true;
      this.contactForm.linkName = row.linkName;
      this.contactForm.phone = row.phone;
      this.contactForm.phoneTwo = row.phoneTwo;
    },
    editContactConfirm() {
      if (!this.contactForm.linkName || !this.contactForm.phone) {
        this.$message.error('联系人和电话不能为空');
        return false;
      }
      BeeperApi.editContact({
        linkName: this.contactForm.linkName,
        phone: this.contactForm.phone,
        phoneTwo: this.contactForm.phoneTwo,
        beeperId: this.beeperId,
      }).then((res) => {
        if (res.status == 0) {
          this.$message.success('操作成功');
          this.listData();
          this.editContactCancel();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    editContactCancel() {
      this.editContactShow = false;
      this.contactForm.linkName = '';
      this.contactForm.phone = '';
      this.contactForm.phoneTwo = '';
    },
  },
};
</script>

<style lang="scss">
@import '@/assets/css/views/content.scss';
</style>
<style lang="scss" scoped>
.upload {
  .el-icon-plus {
    font-size: 30px;
  }

  .excel-file {
    height: 100px;
    text-align: center;

    img {
      width: 100px;
    }
  }
}

.opration_wrap {
  align-items: end;
}

.operationButton {
  > div:nth-child(1) {
    margin-bottom: 10px;
  }
}

.no-file {
  &::v-deep .el-upload {
    height: 150px;
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border: 1px rgb(160, 160, 160) dashed;
    border-radius: 4px;

    &:hover {
      border-color: black;
    }
  }
}
</style>
